<template>
  <div>
    来自于：<select v-model="city">
      <option value="广东">广东</option>
      <option value="江西">江西</option>
      <option value="湖南">湖南</option>
      <option value="广西">广西</option>
    </select>
    <br />
    <!-- 
      v-model 用在复选框时，比较特殊
      当 vue 变量为非数组时，v-model 默认选中 checked 属性，而非 value
      当 vue 变量为数组时，v-model 不在选中 checked 属性，而是选中 value
     -->
    爱好：<input v-model="hobby" type="checkbox" value="羽毛球" />羽毛球
    <input v-model="hobby" type="checkbox" value="篮球" />篮球
    <input v-model="hobby" type="checkbox" value="音乐" />音乐
    <input v-model="hobby" type="checkbox" value="游戏" />游戏
    <br />
    性别：
    <input v-model="gender" type="radio" value="男" />男
    <input v-model="gender" type="radio" value="女" />女
    <br />
    自我介绍
    <textarea v-model="introduction" cols="30" rows="5"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      city: "广东",
      hobby: [],
      gender: "",
      introduction: "",
    };
  },
};
</script>
</script>

<style>
</style>